<?php

use app\assets\BackendAsset;
use \app\models\tableModel\AdminRoleModel;

BackendAsset::addCss($this, '/plugin/vue-treeselect/css/vue-treeselect.min.css');
BackendAsset::addCss($this, '/css/backend/admin-menu-index.css');
?>
<el-container class="index-wrapper">
    <el-header class="top-wrapper bg-white" :class="getTopClass" height="auto" ref="mainScrollShadow">
        <el-row :inline="true" class="button-container">
            <el-col :xs="12" :sm="12" :md="12" :lg="5">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <a><i class="el-icon-location-outline"></i>&nbsp;首页</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item @dblclick.native="window.open(window.location.href)">
                        菜单管理
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="19" class="text-right">
                <?php if (AdminRoleModel::checkAuth('AdminMenu', 'cache')) { ?>
                    <el-button class="" size="mini" type="danger" @click.native="showClearDialog()">
                        刷新角色菜单缓存
                    </el-button>
                <?php } ?>
                <?php if (AdminRoleModel::checkAuth('create')) { ?>
                    <el-button  class="ml-5" size="mini" type="success" @click.native="goToCreate()">
                        新建
                    </el-button>
                <?php } ?>
                <el-dropdown size="mini" class="ml-15">
                    <el-button type="primary" size="mini">
                        更多操作
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <?php if (AdminRoleModel::checkAuth('open')) { ?>
                            <el-dropdown-item @click.native="openItem(null)" size="mini">
                                批量恢复
                            </el-dropdown-item>
                        <?php } ?>
                        <?php if (AdminRoleModel::checkAuth('disabled')) { ?>
                            <el-dropdown-item @click.native="disabledItem(null)" size="mini" divided>
                                批量禁用
                            </el-dropdown-item>
                        <?php } ?>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
    </el-header>
    <el-main class="content-wrapper">
        <div class="pv-10 ph-15">
            <!-- 提醒 START -->
            <div class="tip">
                <el-collapse accordion>
                    <el-collapse-item>
                        <template slot="title">
                            <i class="el-icon el-icon-info"></i>
                            &nbsp;&nbsp;
                            <span class="title">
                                温馨提示
                            </span>
                        </template>
                        <div class="content">
                            <p>
                                1、菜单<code>拖拽</code>可进行排序。
                            </p>
                            <p>
                                2、一级菜单为顶部菜单，二级菜单为左侧父级菜单，三级菜单为左侧二级下的子集菜单也就是最终可点击的连接跳转的菜单。一级菜单只有一个不展示顶部菜单。
                            </p>
                            <p>
                                3、菜单最多添加到3级，4及上不展示！
                            </p>
                            <p>
                                4、渲染菜单：将当前菜单的数据渲染为菜单并保存展示，此操作后可以去后台刷新，即可看到效果。
                            </p>
                            <p>
                                5、图标可以去参考<code><a href="https://element.eleme.cn/#/zh-CN/component/icon" target="_blank">[ELMENT UI官方文档(Icon 图标)]</a></code>找到自己喜欢的图标样式。
                            </p>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 提醒 END -->
        </div>
        <!-- 查询 START -->
        <?= $this->render('../common/search.php', [
            'groupFields'      => 'searchForm.group',
            'groupOtherFields' => 'searchForm.groupOther',
            'baseFields'       => 'searchForm.base',
            'moreFields'       => 'searchForm.more',
            'export'           => 'searchForm.value',
            'submit'           => 'getList'
        ]); ?>
        <!-- 查询 START -->
        <div class="tree-header el-table">
            <el-row :inline="true">
                <el-col :span="14">
                    菜单名称
                </el-col>
                <el-col :span="5">
                    菜单排序
                </el-col>
                <el-col :span="5">
                    菜单图标
                </el-col>
            </el-row>
        </div>
        <el-tree class="filter-tree" :data="dataList" :props="{}" default-expand-all
                 :filter-node-method="filterNode" show-checkbox @check-change="handleTreeCheck"
                 @node-drop="handleNodeDrop" :allow-drop="treeAllowDrop" :expand-on-click-node="false"
                 ref="tree" draggable>
            <div class="custom-tree-node" slot-scope="{ node, data }">
                <div class="tree-item">
                    <el-row :inline="true" :class="'node-lv-' + node.level">
                        <el-col :span="14" class="node-name">
                            <span v-if="node.disabled" class="disabled-tree-item">
                                {{ node.label }}
                            </span>
                            <span v-else>
                                {{ node.label }}
                            </span>
                        </el-col>
                        <el-col :span="5" class="node-field">
                            <span class="sort font-third">
                                {{ data.sort }}
                            </span>
                        </el-col>
                        <el-col :span="5" class="node-field">
                            <span class="font-third" :class="data.font_icon"></span>
                        </el-col>
                    </el-row>
                </div>
                <div class="tree-button-group pr-15" @mouseenter="setting.treeRightHover = true"
                     @mouseleave="setting.treeRightHover = false">
                    <?php if (AdminRoleModel::checkAuth('update')) { ?>
                        <el-button type="text" size="mini" @click="goToUpdate(node.data.id)">
                            编辑
                        </el-button>
                    <?php } ?>
                    <?php if (AdminRoleModel::checkAuth('create')) { ?>
                        <el-button type="text" size="mini" @click="goToCreate(node.data.id, node)"
                                   v-if="parseInt(node.level) < 3">
                            添加子集
                        </el-button>
                    <?php } ?>
                    <?php if (AdminRoleModel::checkAuth('open')) { ?>
                        <el-button type="text text-success" size="mini" v-if="node.disabled"
                                   @click="openItem(node.data.id)">
                            开启
                        </el-button>
                    <?php } ?>
                    <?php if (AdminRoleModel::checkAuth('disabled')) { ?>
                        <el-button type="text text-danger" size="mini" v-else
                                   @click="disabledItem(node.data.id)">
                            禁用
                        </el-button>
                    <?php } ?>
                </div>
            </div>
        </el-tree>
    </el-main>
</el-container>

<!-- 保存更新 -->
<el-dialog :title="baseDiaTitle + '菜单'" :visible.sync="setting.dialogVis" :lock-scroll="true"
           class="dialog-medium" width="700px" :close-on-click-modal="false">

    <el-form :model="addForm" :rules="addFormRules" ref="addForm" class="form-600 form-center form-full"
             label-width="100px" :validate-on-rule-change="false">
        <el-form-item label="菜单名称" prop="name" class="txt-right" :error="customErrMsg.name">
            <el-input placeholder="输入菜单名称" v-model="addForm.name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="菜单上级" prop="parent_id" class="txt-right" :error="customErrMsg.parent_id">
            <treeselect v-model="addForm.parent_id" :options="addDataList" :show-count="true"
                        :default-expand-level="3" placeholder="请选择上级菜单" noChildrenText="暂无子级菜单">
            </treeselect>
        </el-form-item>
        <el-form-item label="菜单状态" prop="status" class="txt-right">
            <el-radio-group v-model="addForm.status" :error="customErrMsg.status" size="mini">

                <el-radio v-for="item in setting.status_list" :label="item.value">
                    {{item.text}}
                </el-radio>

            </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单连接" prop="url" class="txt-right">
            <el-input placeholder="输入菜单连接" v-model="addForm.url" type="textarea" :rows="2"
                      :error="customErrMsg.url" size="small">
            </el-input>
        </el-form-item>
        <el-form-item label="菜单排序" prop="sort" class="txt-right">
            <el-input placeholder="输入菜单排序" v-model="addForm.sort" :error="customErrMsg.sort"
                      size="small"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标名称" prop="font_icon" class="txt-right">
            <el-input placeholder="输入菜单图标名称" v-model="addForm.font_icon" :error="customErrMsg.font_icon"
                      size="small"></el-input>
        </el-form-item>
    </el-form>

    <div slot="footer">
        <el-button type="danger" size="mini" @click="setting.dialogVis = false">取消</el-button>
        <el-button size="mini" type="success" @click="submitAdd" v-if="setting.isAdd === true">
            创建
        </el-button>
        <el-button size="mini" type="primary" @click="submitUpdate('addForm')"
                   v-if="setting.isAdd === false">
            保存
        </el-button>
    </div>
</el-dialog>
<!-- 保存更新 -->

<!-- 拖拽排序保存[form] -->
<el-form :inline="true" :model="addForm" class="display-inline float-right" ref="stageForm"
         style="display: none;">
</el-form>
<!-- 拖拽排序保存[form] -->

<!-- 刷新缓存弹出层 -->
<?= $this->render('../common/clear-cache.php', [
    'cacheUrl' => ['adminMenu']
]);?>
<!-- 刷新缓存弹出层 -->

<?= BackendAsset::addScript($this, '/plugin/vue-treeselect/js/vue-treeselect.min.js'); ?>
<?= BackendAsset::addScript($this, '/js/backend/admin-menu-index.js'); ?>
<?= $this->registerJs('instance = new app();'); ?>
